import React, { useState } from "react";
import { Avatar, Toast, Image, Mask, SearchBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import CollectIcon from "assets/common_button_collection_large_n.png";
import LargeIcon from "assets/common_icon_comment_large_n.png";
import CloseIcon from "assets/common_button_close_n.png";
import RateIcon from "assets/common_tab_circle_s.png";
import ZhenDuan from "assets/诊断.png";
import "./index.scss";
import Community_Top from "components/Community_Top";
import Community_bottom from "components/Community_Bottom";
const index = () => {
  const navigate = useNavigate();
  const demoAvatarImages =
    "https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ";
  // 点击评论跳转
  const hangleRate = () => {
    navigate("/rate");
  };
  // 跳转用户信息页
  const hangleBtn = () => {
    navigate("/user");
  };
  // 弹窗
  const [visible, setVisible] = useState(false);
  return (
    <div>
      {/* 头部 */}
      <Community_Top />
      {/* 中间 */}
      <div className="main">
        <div style={{ fontSize: "1rem", color: "#3087ea" }}>张三</div>
        <ul>
          <li>[病症]</li>
          <li>面神经炎</li>
        </ul>
        <ul>
          <li>[科室]</li>
          <li>内科</li>
        </ul>
        <ul>
          <li>[病症详情]</li>
          <li>
            周围性神经炎，下巴斜的，口齿不清，眼睛闭合不了，右边 脸明显动不了
          </li>
        </ul>

        <ul>
          <li>[病症]</li>
          <li>
            北京天坛医院{" "}
            <span style={{ marginLeft: "8rem" }}>2018.12.12-12.14</span>
          </li>
          <li>
            每天进行扎针和按摩，现在情况已经好转了，眼睛基本可以
            闭合了，说话也没那么费劲了。
          </li>
        </ul>
        <ul>
          <li>[相关图片]</li>
          <li>
            <Image src={ZhenDuan}></Image>
          </li>
          <li className="RateImg">
            <Avatar className="avatar" src={CollectIcon} />
            <span>12</span>
            <Avatar
              className="avatar"
              onClick={() => setVisible(true)}
              src={LargeIcon}
            />
            <span>12</span>
          </li>
        </ul>
        <ul>
          <li style={{ color: "#000" }}>被采纳的建议</li>
          <li>
            <Avatar className="avatar" src={demoAvatarImages} />
            <span className="avt">猪小妹</span>
            <span className="avts">2018.09.23</span>
          </li>
          <li>
            你好，面神经炎也叫面神经麻痹或周围性面瘫。急性期可以
            应用抗病毒药物和激素， 经，活血化瘀等治疗。同时 可以合并针灸,
            每天进行扎针和按摩，现在情况已经好转了，眼睛基本可以
            闭合了，说话也没那么费劲了。
          </li>
        </ul>
      </div>

      {/* 弹窗 */}
      <Mask visible={visible}>
        <div className="Mask">
          <ul>
            <li>
              <Avatar
                className="avatarUear"
                onClick={hangleBtn}
                src={demoAvatarImages}
              ></Avatar>
            </li>
            <li>
              <p>小楠楠</p>
              <p>
                面神经炎出现面部肌肉瘫痪可以通过服用药物
                以及针灸、按摩等非手术方法进行治疗和改 善，一般会慢慢康复
              </p>
            </li>
          </ul>
          <ul>
            <li>
              <Avatar className="avatarUear" src={demoAvatarImages}></Avatar>
            </li>
            <li>
              <p>小妮子</p>
              <p>
                继续听医生的安排给予激素类药物以及营养神
                经的药物对症处理同时配合针灸理疗效果还是
                很好的大多数都会痊愈所以不要着急
              </p>
            </li>
          </ul>

          <Avatar
            className="close"
            onClick={() => setVisible(false)}
            src={CloseIcon}
          ></Avatar>
          <SearchBar
            icon={<></>}
            className="search"
            placeholder="再次留下高见吧! !"
          />
        </div>
      </Mask>

      {/* 评论 */}
      <Image
        onClick={hangleRate}
        src={RateIcon}
        width={64}
        height={64}
        fit="cover"
        className="rate"
      />
      {/* 底部组件 */}
      <Community_bottom />
    </div>
  );
};
export default index;
